<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入jquery -->
<script type="text/javascript"
	th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript"
	th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
</head>

<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>

	<script type="text/javascript">
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	option = {
	    title: {
	        text: '某站点用户访问来源',
	        subtext: '纯属虚构',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item'
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	    },
	    series: [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius: '50%',
	            data: [
	                {value: 1048, name: '搜索引擎'},
	                {value: 735, name: '直接访问'},
	                {value: 580, name: '邮件营销'},
	                {value: 484, name: '联盟广告'},
	                {value: 300, name: '视频广告'}
	            ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};

	option && myChart.setOption(option);

	</script>
</body>
</html>